<template>
    <div class="search">
        <van-nav-bar
                title="搜索"
                left-text="返回"
                right-text=""
                left-arrow
                @click-left="onClickLeft"
                @click-right="onClickRight"
        />
        <!--        搜索-->
        <van-row>
            <van-col span="20"><van-search
                    v-model="value"
                    shape="round"
                    background="#FFFFFF"
                    placeholder="收缩爆款商品...."
            /></van-col>
            <van-col span="2" class="message" @click="search"><span>搜索</span></van-col>
        </van-row>
        <div>
            <h5>热门搜索</h5>
            <div class="hotList">
                <div v-for="item in hotArr"><span>{{item.name}}</span></div>

            </div>
        </div>
        <div>
            <h5>历史记录</h5>
            <div class="historyList">
                <div v-for="item in historyArr"><span>{{item.name}}</span></div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "search",
        data(){
            return{
                hotArr:[
                    {name:'美妙小妙招',url:''},
                    {name:'美妙小妙招',url:''},
                    {name:'美妙小妙招',url:''},
                    {name:'美妙小妙招',url:''},
                    {name:'美妙小妙招',url:''},
                    {name:'美妙小妙招',url:''},
                    ],
                historyArr:[
                    {name:'面膜', url:''},
                    {name:'美妆', url:''},
                    {name:'洗衣液',url:''},
                    {name:'洗衣液',url:''},
                    {name:'洗衣液',url:''}
                ],
            value:''
            }
        },
    methods:{
        onClickLeft() {
            // Toast('返回');
            this.$router.push('/')
        },
        onClickRight() {
            // Toast('按钮');
        },
        search(){
            this.$axios.post('/api/goods/getKeyWords?keyWords='+this.value).then((res)=>{
                if (res.data.data.length>0){
                    sessionStorage.setItem('value',this.value)
                    sessionStorage.setItem('goods',JSON.stringify(res.data.data))
                    this.$router.push('/searchDetails')
                    console.log(res.data.data)
                }
                console.log(res)
            })
        }
    }
    }
</script>

<style scoped>
.message{
    line-height: 54px;
}
    .hotList{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .hotList>div{
        margin-top: 20px;
        border-radius: 20px;
        background: #F2F2F2;
        padding: 5px 15px;
    }
    h5{
        margin-top: 10px;
        margin-bottom: 0px;
        margin-left: 10px;
    }
    .historyList{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .historyList>div{
        margin-top: 20px;
        border-radius: 20px;
        background: #F2F2F2;
        padding: 5px 15px;
    }
.hotList>div>span{
    font-size: 13px;

}
</style>